<template>
    <section class="main">
        <!-- 商户流量包 -->
        <div class="title">
            <span>流量包信息</span>
            <div>
                <el-button v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8" icon="el-icon-edit"
                           @click="merPoint = true">修改
                </el-button>
            </div>
        </div>
        <div class="container">
            <div class="itemBox">
                <div class="line">
                    <div>商户名</div>
                    <div>{{merPointInfo.merchantName}}</div>
                </div>
                <div class="line">
                    <div>商户号</div>
                    <div>{{merPointInfo.merchantNo}}</div>
                </div>
            </div>
            <div class="accountinfoBox">
                <div class="item">
                    <div class="accounttit">当前可用额度</div>
                    <div v-if="merPointInfo.point > merPointInfo.warnValue" class="accountval">{{merPointInfo.point}}
                    </div>
                    <div v-else-if="merPointInfo.point < 0" class="debt">{{merPointInfo.point}}</div>
                    <div v-else class="warn">{{merPointInfo.point}}</div>
                </div>
                <div class="item">
                    <div class="accounttit">充值比例</div>
                    <div class="accountval">{{merPointInfo.limitRatio/10}}‰</div>
                </div>
                <div class="item">
                    <div class="accounttit">充值系数</div>
                    <div class="accountval">{{merPointInfo.limitMul/100}}</div>
                </div>
                <div class="item">
                    <div class="accounttit">预警阈值</div>
                    <div class="accountval">{{merPointInfo.warnValue}}</div>
                </div>
                <div class="item">
                    <el-button class="adjust-point" @click="showAdjustPoint = true" type="primary">调额</el-button>
                </div>
                <!--<div class="item">-->
                <!--<el-button class="recharge" @click="jumprecharge" type="primary">立即充值</el-button>-->
                <!--</div>-->
            </div>
        </div>
        <!-- 流量账单 -->
        <div class="title">
            <span>流量账单</span>
        </div>
        <div class="container" style="padding: 0px !important;">
            <div class="searchBox">
                <div class="leftBox">
                    <div class="leftitem">
                        <div class="block">
                            <el-date-picker
                                    v-model="ctime"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :clearable='false'
                                    :default-time="['00:00:00', '23:59:59']"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="rightitem">
                        <el-button icon="el-icon-search" type="primary" @click="searchMpr" :disabled="searchDisable">
                            搜索
                        </el-button>
                        <!-- <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button> -->
                    </div>
                </div>
            </div>
            <div class="tableBox">
                <el-table
                        ref="multipleTable"
                        :data="chargeOrderPagelist"
                        tooltip-effect="dark"
                        style="width: 95%;margin: 0 auto;"
                        @selection-change="handleSelectionChange"
                        stripe
                        :header-cell-style="tableHeaderColor"
                        v-loading="loading"
                >
                    <el-table-column prop="createTime" align="center" label="出账时间"></el-table-column>
                    <el-table-column prop="tradeAmount" align="center" label="账单类型">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 1">流量充值</div>
                            <div v-if="scope.row.type == 2">流量扣减</div>
                            <div v-if="scope.row.type == 3">人工提额</div>
                            <div v-if="scope.row.type == 4">人工降额</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="充值时间?充值订单号" :render-header="renderheader">
                        <template slot-scope="scope">
                            <div>{{scope.row.tradeTime}}</div>
                            <div>{{scope.row.tradeNo}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tradeAmount" align="center" label="充值金额(元)">
                        <template slot-scope="scope">{{(scope.row.tradeAmount/100).toFixed(2)}}</template>
                    </el-table-column>
                    <el-table-column prop="limitRatio" align="center" label="充值比例(‰)">
                        <template slot-scope="scope">{{(scope.row.limitRatio/10).toFixed(1)}}</template>
                    </el-table-column>
                    <el-table-column prop="point" align="center" label="变更额度"></el-table-column>
                    <el-table-column prop="pointBefore" align="center" label="变更前额度"></el-table-column>
                    <el-table-column prop="pointAfter" align="center" label="变更后额度"></el-table-column>
                    <!--<el-table-column fixed="right" align="center" label="操作" width="120">-->
                    <!--<template slot-scope="scope">-->
                    <!--<el-button type="text" size="small" @click="">详情</el-button>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            @size-change="sizechange"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="combined"
                            :current-page.sync="cur_page"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!-- 编辑流量包 -->
        <el-dialog v-dialogDrag title="编辑流量包" :visible.sync="merPoint" width="35%" :close-on-click-modal='false'>
            <el-form class="demo-dynamic">
                <el-form-item :required="true" label="充值比例（万分比）">
                    <el-input type="text" v-model.trim="alertPointInfo.limitRatio" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :required="true" label="充值系数（可精确到两位小数）">
                    <el-input type="text" v-model.trim="alertPointInfo.limitMul" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :required="true" label="预警阈值">
                    <el-input type="text" v-model.trim="alertPointInfo.warnValue" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预警邮箱">
                    <el-input type="text" v-model.trim="alertPointInfo.warnMail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div style="width:100%;text-align:right;margin-top:30px;">
                <el-button type="primary" @click="merPoint = false">取消</el-button>
                <el-button type="primary" @click="alertMerPoint">确定</el-button>
            </div>
        </el-dialog>
        <!-- 调额 -->
        <el-dialog v-dialogDrag title="调额" :visible.sync="showAdjustPoint" width="40%" :close-on-click-modal="false">
            <el-form status-icon label-width="110px" class="demo-dynamic">
                <el-form-item label="当前可用额度">
                    <el-input type="text" disabled="disabled" style="width:80%;" v-model.trim="merPointInfo.point"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="调额方式">
                    <el-select style="width:80%;" v-model="adjustPointInfo.type" placeholder="选择调额方式">
                        <el-option label="上调" :value="0"></el-option>
                        <el-option label="下调" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调整额度">
                    <el-input type="text" style="width:80%;" v-model.trim="adjustPointInfo.val"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="调额原因">
                    <el-input type="text" style="width:80%;" v-model.trim="adjustPointInfo.reason"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="showAdjustPoint = false">取消</el-button>
        <el-button type="primary" @click="adjustPoint">确定</el-button>
      </span>
        </el-dialog>
    </section>
</template>

<script>
    import {adjustPoint, alertMerPoint, merChargeOrderPage, findMerPoint} from "@/api/api";

    export default {
        data() {
            return {
                userinfo: {},
                merPoint: false,
                showAdjustPoint: false,
                rechargearr: [],
                loading: false,
                combined: 0,
                cur_page: 1,
                cur_size: 10,
                merPointInfo: {},
                alertPointInfo: {},
                adjustPointInfo: {
                    type: 0
                },
                searchDisable: false,
                chargeOrderPagelist: [],
                ctime: '',
                pickerOptions: {
                    disabledDate(time) {
                        let nowDate = new Date()
                        let date = {
                            year: nowDate.getFullYear(),
                            month: nowDate.getMonth() + 1,
                            date: nowDate.getDate() - 1
                        }
                        let timeDate = date.year + '-' + date.month + '-' + date.date + ' 23:59:59';
                        let times = new Date(timeDate).getTime()
                        return time.getTime() > times
                    },
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
            };
        },
        created() {
            this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            const year = start.getFullYear();
            const month = start.getMonth() + 1;
            const date = start.getDate();
            if (month < 10) {
                const date1 = year + '-' + 0 + month + '-' + date;
                const date2 = year + '-' + 0 + month + '-' + date;
                this.ctime = [date1, date2]
            } else {
                const date1 = year + '-' + month + '-' + date;
                const date2 = year + '-' + month + '-' + date;
                this.ctime = [date1, date2]
            }
            this.findMerPoint();
        },
        methods: {
            //修改thead 背景色
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.merChargeOrderPage()
                this.$nextTick(() => {
                    document.querySelectorAll('.content')[0].scrollTop = '0'
                });
            },
            // 分页数量
            sizechange(val) {
                this.cur_size = val
                this.merChargeOrderPage()
                this.$nextTick(() => {
                    document.querySelectorAll('.content')[0].scrollTop = '0'
                });
            },
            // 查询额度
            findMerPoint() {
                findMerPoint({}, this.$route.query.merPointId).then(res => {
                    console.log(res);
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else if (res.code == 200) {
                        this.merPointInfo = res.data;
                        this.alertPointInfo = {
                            limitRatio: this.merPointInfo.limitRatio + "",
                            limitMul: this.merPointInfo.limitMul / 100 + "",
                            warnValue: this.merPointInfo.warnValue + "",
                            warnMail: this.merPointInfo.warnMail + ""
                        };
                        this.merChargeOrderPage();
                    }
                });
            },
            // 积分记录列表
            merChargeOrderPage() {
                merChargeOrderPage({
                    merchantId: this.merPointInfo.merchantId,
                    startDate: this.ctime[0],
                    endDate: this.ctime[1],
                    page: this.cur_page,
                    size: this.cur_size,
                }).then(res => {
                    console.log(res);
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else if (res.code == 200) {
                        this.chargeOrderPagelist = res.data.records;
                        this.combined = res.data.total;
                    }
                });
            },
            // 修改流量包配置
            alertMerPoint() {
                if (this.alertPointInfo.limitRatio == null || this.alertPointInfo.limitRatio.match(/\D/g)) {
                    this.$message.error("积分充值比例必须为整数");
                    return;
                }
                if (this.alertPointInfo.limitMul == null || !this.alertPointInfo.limitMul.match("^[0-9]+(.[0-9]{1,2})?$")) {
                    this.$message.error("积分充值系数格式错误");
                    return;
                }
                if (this.alertPointInfo.warnValue == null || this.alertPointInfo.warnValue.match(/\D/g)) {
                    this.$message.error("积分预警阈值必须为整数");
                    return;
                }
                let loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                alertMerPoint({
                    id: this.merPointInfo.id,
                    limitRatio: this.alertPointInfo.limitRatio,
                    limitMul: this.alertPointInfo.limitMul,
                    warnValue: this.alertPointInfo.warnValue,
                    warnMail: this.alertPointInfo.warnMail
                }).then(res => {
                    if (res.code == 405) {
                        sessionStorage.removeItem("token");
                        this.$router.push("/login");
                    } else if (res.code == 200) {
                        this.merPoint = false;
                        this.$message.success("修改成功！");
                        this.merPointInfo.limitRatio = this.alertPointInfo.limitRatio;
                        this.merPointInfo.limitMul = this.alertPointInfo.limitMul * 100;
                        this.merPointInfo.warnValue = this.alertPointInfo.warnValue;
                        this.merPointInfo.warnMail = this.alertPointInfo.warnMail;
                    } else {
                        this.$message.error(res.message);
                    }
                    loading.close();
                });
            },
            // 流量包调额
            adjustPoint() {
                if (this.adjustPointInfo.val == null || this.adjustPointInfo.val.match(/\D/g)) {
                    this.$message.error("调整额度必须为整数");
                    return;
                }
                let loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                adjustPoint({
                    id: this.merPointInfo.id,
                    type: this.adjustPointInfo.type,
                    val: this.adjustPointInfo.val,
                    reason: this.adjustPointInfo.reason
                }).then(res => {
                    if (res.code == 405) {
                        sessionStorage.removeItem("token");
                        this.$router.push("/login");
                    } else if (res.code == 200) {
                        this.showAdjustPoint = false;
                        this.$message.success("调额成功！");
                        this.adjustPointInfo = {
                            type: 0
                        };
                        this.findMerPoint();
                    } else {
                        this.$message.error(res.message);
                    }
                    loading.close();
                });
            },
            searchMpr() {
                this.merChargeOrderPage();
            },
            // 跳充值
            jumprecharge() {
                this.$router.push("/recharge");
                // sessionStorage.setItem('instNos', this.limitinfo.instNo);
                // sessionStorage.setItem('limitMul', this.limitinfo.limitMul);
                // sessionStorage.setItem('limitRatio', this.limitinfo.limitRatio);
            },
            renderheader(h, {column, $index}) {
                return h("span", {}, [
                    h("span", {}, column.label.split("?")[0]),
                    h("br"),
                    h("span", {}, column.label.split("?")[1])
                ]);
            },
        }
    };
</script>

<style scoped lang="less">
    .title {
        background: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }

    .container {
        float: left;
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .container .itemBox {
        width: 50%;
    }

    .container .itemBox .line {
        width: 100%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
    }

    .container .itemBox .line div:nth-child(1) {
        width: 20%;
        text-align: left;
    }

    .container .itemBox .line div:nth-child(2) {
        width: 80%;
        text-align: left;
        color: #888888;
    }

    .container .accountinfoBox {
        margin-top: 15px;
        width: 100%;
        display: flex;
        align-items: center;
        .item {
            width: 20%;
            height: 50px;
            .accountval {
                color: #2E71D9;
                font-size: 22px;
                line-height: 24px;
            }
            .debt {
                color: red;
                font-size: 22px;
                line-height: 24px;
            }
            .warn {
                color: orange;
                font-size: 22px;
                line-height: 24px;
            }
        }
        .recharge {
            width: 70%;
        }
        .adjust-point {
            width: 70%;
        }

    }

    .searchBox {
        width: 100%;
        display: flex;
        background: #fff;
        margin: 0px auto;
    }

    .leftBox,
    .rightBox {
        padding: 10px 0 0 2.5%;
        box-sizing: border-box;
    }

    .leftBox > .leftitem {
        margin-bottom: 15px;
    }

    .rightBox > .rightitem {
        margin-bottom: 15px;
    }

    .tableBox {
        width: 100%;
        background: #fff;
    }
</style>
